<template>
	<view class="content">
		<!-- 登录 -->
		<view class="user-box">
			<image src="../../static/yonghu.png"></image>
			<text>未登录</text>
			<view class="btn">
				<button type="default">立即登录</button>
			</view>
		</view>
		<!-- 歌曲搜索 -->
		<input type="text" value="" placeholder="搜索歌曲" @tap="ins" />
		<!-- 轮播-->
		<view class="share-box">
			<swiper circular duration="1000" indicator-dots="true" indicator-color="#ffffff" interval="5000"
				indicator-active-color="#e2ba27" autoplay>
				<swiper-item v-for="(item, index) in banners" :key="index" class="si">
					<image class="loaded" :src="item.pic"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 排行榜 -->
		<view class="Ranking-box">
			<view class="Ranking" v-for="(item,index) in list" :key="index" @tap="songsheet" v-if="index<4">
				<image :src="item.coverImgUrl"></image>
				<view class="txt">
					{{item.updateFrequency}}
				</view>
				<view class="txt-right">
					<view class="txt-right-txt" v-for="(item1,index1) in item.tracks">
						{{index1+1}}.{{item1.first}}-{{item1.second}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tracks: [],
				banners: [],
			}

		},
		onLoad() {
			// 排行榜
			uni.request({
					url: "https://autumnfish.cn/toplist/detail",
					success: res => {
						// console.log(res.data.list[0].tracks)
						// console.log(res.data.list)
						this.list = res.data.list
						this.tracks = res.data.list.tracks
					}
				}),
				// 轮播图
				uni.request({
					url: "https://autumnfish.cn/banner?type=1",
					success: res => {
						// console.log(res.data.banners)
						this.banners = res.data.banners
					}
				})
		},
		methods: {
			// 跳转
			songsheet(e) {
				// console.log(e)
				var newsid = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "../songsheet/songsheet"
				})
			}
		},
		ins(e) {
			console.log(e)
			var inid = e.currentTarget.dataset.id;
			uni.navigateTo({
				url: "../inputs/inputs"
			})
		}
	}
</script>

<style>
	/* 登录 */
	.user-box {
		position: relative;
		top: 10rpx;
		width: 690rpx;
		height: 70rpx;
		/* border: #007AFF 1px solid; */
		margin: 0 auto;
	}

	image {
		width: 70rpx;
		height: 70rpx;
	}

	.btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 170rpx;
		height: 35rpx;

	}

	button {
		font-size: 20rpx;
		border-radius: 50rpx;
		border: 1rpx #a6a6a6 solid;
		box-sizing: border-box;
	}

	text {
		position: absolute;
		top: 25rpx;
		left: 80rpx;
		display: inline-block;
		width: 100rpx;
		font-size: 20rpx;
		height: 50rpx;
		color: #a4a1b1;

	}

	/*  歌曲搜索*/
	input {
		position: relative;
		top: 20rpx;
		width: 660rpx;
		height: 72rpx;
		background-color: #f4f4f4;
		border-radius: 50rpx;
		margin: 0 auto;
		padding-left: 40rpx;
	}

	/*分享朋友  */
	.share-box {
		position: relative;
		top: 40rpx;
		width: 700rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		/* background-color: #006fe6;*/
	}

	.loaded {
		width: 100%;
		height: 100%;
	}

	/* 排行榜 */
	.Ranking-box {
		position: relative;
		top: 60rpx;
		width: 700rpx;
		/* border: #006FE6 1px solid; */
		margin: 0 auto;
	}

	.Ranking {
		width: 700rpx;
		height: 200rpx;
		/* border: #006FE6 1px solid; */
		margin-bottom: 30rpx;
	}

	.Ranking image {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		color: #bebebe;
	}

	.txt {
		position: absolute;
		left: 10rpx;
		font-size: 25rpx;
		margin-top: 165rpx;
		color: #ffffff;
		display: inline-block;
		z-index: 999;
	}

	.txt-right {
		position: absolute;
		right: 0;
		margin-top: -210rpx;
		width: 500rpx;
		height: 200rpx;
		/* border: #006FE6 1px solid; */
	}

	.txt-right-txt {
		margin-left: 10rpx;
		margin-top: 18rpx;
		font-size: 25rpx;
		color: #707070;
	}

	.Ranking-right {
		position: absolute;
		margin-top: -204rpx;
		margin-left: 200rpx;
		text-align: center;
		font-size: 25rpx;
		width: 500rpx;
		/* line-height: 100rpx; */
		height: 200rpx;

	}
</style>
